<template>
  <div v-show="props.compType === 'text'">
    <div v-if="props.fieldType === 'CombineValue'">
      <el-form-item label="标题" labelWidth="70px">
        <el-input class="input" v-model="props.text"></el-input>
      </el-form-item>
           <el-form-item label="标签宽度" labelWidth="70px">
      <el-input-number v-model="props.labelWidth"  :min="1" :max="200"></el-input-number>
    </el-form-item>
       <el-form-item label="字段宽度" labelWidth="70px">
        <el-radio-group v-model="props.span">
          <el-radio-button :label="6" :value="6">1/4</el-radio-button>
          <el-radio-button :label="8" :value="8">1/3</el-radio-button>
          <el-radio-button :label="12" :value="12">1/2</el-radio-button>
          <el-radio-button :label="24" :value="24">整列</el-radio-button>
        </el-radio-group>
      </el-form-item>
 
      <el-form-item label="类型" labelWidth="70px">
        <el-radio-group v-model="props.valType" @change="getline">
          <el-radio-button label="date">时间</el-radio-button>
          <el-radio-button label="num">数字</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="选项" labelWidth="70px">
        <el-checkbox-group v-model="props.fieldNames">
          <el-checkbox
            v-for="city in itemlist"
            :label="city.label"
            :key="city.id"
            >{{ city.label }}</el-checkbox
          >
        </el-checkbox-group>
      </el-form-item>
      <el-alert
        title="表单式举例"
        description="(f1-f2)/3600, (f1-f2)/86400,  (f1-f2)/31536000"
        type="info"
        style="margin-bottom:15px"
      >
      </el-alert>

      <el-form-item label="表达式" labelWidth="70px">
        <el-input
          class="input"
          type="textarea"
          v-model="props.function"
          placeholder="请输入聚合表单式"
          style="width:100% !important"
        ></el-input>
      </el-form-item>
    </div>

    <div v-if="props.fieldType === 'Reference'">
      <el-form-item label="标题" labelWidth="70px">
        <el-input class="input" v-model="props.text"></el-input>
      </el-form-item>
      <el-form-item label="标签宽度" labelWidth="70px">
        <el-input-number
          v-model="props.labelWidth"
          :min="1"
          :max="200"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="字段宽度" labelWidth="70px">
        <el-radio-group v-model="props.span">
          <el-radio-button :label="6" :value="6">1/4</el-radio-button>
          <el-radio-button :label="8" :value="8">1/3</el-radio-button>
          <el-radio-button :label="12" :value="12">1/2</el-radio-button>
          <el-radio-button :label="24" :value="24">整列</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="栅格间隔" labelWidth="70px">
        <el-input-number v-model="props.gutter" :min="0"></el-input-number>
      </el-form-item>
      <!-- <el-form-item label="显示标签" labelWidth="70px">
      <el-switch v-model="props.showLabel"></el-switch>
    </el-form-item> -->
      <el-form-item label="必填" labelWidth="70px">
        <el-switch v-model="props.required"></el-switch>
      </el-form-item>
      <el-form-item
        label="关联表"
        labelWidth="70px"
        v-if="props.fieldType === 'Reference'"
      >
        <el-select
          v-model="props.tableid"
          placeholder="请选择"
          size="small"
          @change="changeOpti"
        >
          <el-option
            v-for="item in tablelist"
            :key="item.tableId"
            :label="item.tableName"
            :value="item.tableId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="关联字段"
        labelWidth="70px"
        v-if="props.fieldType === 'Reference'"
      >
        <el-select v-model="props.refFldId" placeholder="请选择" size="small">
          <el-option
            v-for="item in fildlist"
            :key="item.fieldId"
            :label="item.fieldName"
            :value="item.fieldId"
          ></el-option>
        </el-select>
      </el-form-item>
    </div>
       <div v-if="props.fieldType === 'ChildForm'">
      <el-form-item label="标题" labelWidth="70px">
        <el-input class="input" v-model="props.text"></el-input>
      </el-form-item>
       <el-form-item label="必填"  labelWidth="60px">
      <el-switch v-model="props.required"></el-switch>
    </el-form-item>
         <el-form-item label="标签宽度" labelWidth="70px">
      <el-input-number v-model="props.labelWidth"  :min="1" :max="200"></el-input-number>
    </el-form-item>
      <el-form-item
        label="关联表"
        labelWidth="70px"
        v-if="props.fieldType === 'ChildForm'"
      >
        <el-select
          v-model="props.tableid"
          placeholder="请选择"
          size="small"

        >
          <el-option
            v-for="item in tablist"
            :key="item.tableId"
            :label="item.tableName"
            :value="item.tableId"
          ></el-option>
        </el-select>
      </el-form-item>
    </div>
  </div>
</template>
<script>
import { changeId } from "../mixin";
import { api } from "../../../server/api";
export default {
  name: "textConfig",
  props: ["props", "list", "tablelist","tablist"],
  created() {
    console.log(this.tablist)
    if (this.props.fieldType === "CombineValue") {
      if (this.props.privateInfo != undefined) {
        console.log(JSON.parse(this.props.privateInfo));
        this.props.valType = JSON.parse(this.props.privateInfo).valType;
        this.props.fieldNames = JSON.parse(this.props.privateInfo).fieldNames;
      }
      this.chelisy();
    }
  },
  watch: {
    props: {
      handler(val) {
        console.log(val);
        if (val.fieldType === "Reference") {
          this.getdetail(this.props.tableid);
        } else {
          let list = JSON.parse(JSON.stringify(this.list));
          if (val.valType === "date") {
            const finvalue = list.filter((val) => {
              return val.fieldType === "InputDate";
            });
            this.itemlist = finvalue;
            this.max = 2;
          } else {
            const finvalue = list.filter((val) => {
              return val.fieldType === "InputNumber";
            });
            this.itemlist = finvalue;
            this.max = 100000;
          }
        }
      },
      deep: true,
    },
  },
  data() {
    return {
      ishow: false,
      itemlist: [],
      max: 2,
      fildlist: [],
    };
  },
  mixins: [changeId],
  methods: {
    chagejr() {},
    handlerChangeSize(val) {
      this.props.size = val + "";
    },
    handclick() {},
    getline() {
      this.props.fieldNames = [];
      this.chelisy();
    },
    changeOpti() {
      this.fildlist = [];
      this.props.refFldId = "";
      this.getdetail(this.props.tableid);
      console.log(this.props.tableid);
    },
    getdetail(tableId) {
      api.stdappTableDetail({ tableId }).then((res) => {
        this.fildlist = res.fieldLst;
        this.$forceUpdate();
      });
    },
    chelisy() {
      let list = JSON.parse(JSON.stringify(this.list));
      console.log(list);
      if (this.props.valType === "date") {
        const finvalue = list.filter((val) => {
          return val.fieldType === "InputDate";
        });
        this.itemlist = finvalue;
      } else {
        const finvalue = list.filter((val) => {
          return val.fieldType === "InputNumber";
        });
        this.itemlist = finvalue;
      }
      console.log(this.itemlist);
    },
    handlerChangeBold(val) {
      this.props.bold = val + "";
    },
  },
};
</script>
